import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    Platform
} from 'react-native';
import {Toast,ModalIndicator,Overlay} from 'teaset';
import OverlaySureRemind from "../compoment/OverlaySureRemind";
import OverlayInRemind from "../compoment/OverlayInRemind";
const {height, width} = Dimensions.get('window');
const STORAGE_KEY_TOKEN = '@AsyncStorageDemo:key_token';
export default class ChatItem extends Component {
    componentDidMount() {
        this._loadInitialState().done();
    }
    async _loadInitialState(){
        try{
            let value=await AsyncStorage.getItem(STORAGE_KEY_TOKEN);
            if(value!==null){
                this._appendMessage(value);
            }else{
                this._appendMessage('');
            }
        }catch(error){
            this._appendMessage('AsyncStorage错误'+error.message);
        }
    }
    _appendMessage=(message)=>{
        this.setState({
            token:this.state.token.concat(message)
        });
    };
    constructor(props) {
        super(props);
        this.state = {
            token:''
        }
    };



    chatItem=(isMsg,message,photo,identity,id,IMid,haveUsed)=>{
        if(identity!='user'){
            if(isMsg==0){
                return (<Text style={[styles.labelMsg,{color:'#ffffff',lineHeight:20}]}>{message}</Text>)
            }else if(isMsg==1){
                return (
                    <TouchableOpacity onPress={()=>this.showPop(photo)}>
                        <Image
                            style={[{height:width/2,width:width/2,resizeMode: Image.resizeMode.stretch}]}
                            source={{uri:ImageHead.baseApi+photo}}/>
                    </TouchableOpacity>
                )
            }else if(isMsg==2){
                return(
                    <TouchableOpacity
                        //onPress={()=>this.jumpPage(message,id,IMid,haveUsed)}
                        //onPress={()=>this.jumpPage(message,id,IMid)}
                        //onPress={()=>{Actions.ShoppingCartPage()}}
                        style={{flexDirection:'row',alignItems:'center',width:width-123}}>
                        {photo!=''
                            ?(<Image
                                style={{height:54,width:54,marginLeft:15}}
                                source={{uri:ImageHead.baseApi+photo}}/>)
                            :(<Image
                                style={{height:54,width:54,marginLeft:15}}
                                source={ImageUtil.placeholder}/>)}
                        <View style={{marginTop:10, marginBottom:10, marginLeft:18,flex:1,
                            marginRight:16,flexDirection:'row',flexWrap:'wrap'}}>
                            <Text style={{fontSize:14, color:'#fff',flex:1,lineHeight:20,
                                backgroundColor:'rgba(0,0,0,0)'}}>{message}</Text>
                        </View>
                    </TouchableOpacity>
                )
            }
        }else {
            if(isMsg==0){
                return (<Text style={[styles.labelMsg,{color:'#000',lineHeight:20}]}>{message}</Text>)
            }else if(isMsg==1){
                return (
                    <TouchableOpacity onPress={()=>this.showPop(photo)}>
                        <Image
                            style={[{height:width/2,width:width/2,resizeMode: Image.resizeMode.stretch}]}
                            source={{uri:ImageHead.baseApi+photo}}/>
                    </TouchableOpacity>
                )
            }else if(isMsg==2){
                return(
                    <TouchableOpacity
                        //onPress={()=>this.getDetails(message,id,IMid,haveUsed)}
                        style={{flexDirection:'row',alignItems:'center',width:width-123}}>
                        {photo!=''
                            ?(<Image
                                style={{height:54,width:54,marginLeft:15}}
                                source={{uri:ImageHead.baseApi+photo}}/>)
                            :(<Image
                                style={{height:54,width:54,marginLeft:15}}
                                source={ImageUtil.placeholder}/>)}
                        <View style={{marginTop:10, marginBottom:10, marginLeft:18,
                            marginRight:16,flexDirection:'row',flexWrap:'wrap',flex:1}}>
                            <Text style={{fontSize:14, color:'#000000',lineHeight:20,
                                backgroundColor:'rgba(0,0,0,0)'}}>{message}</Text>
                        </View>
                    </TouchableOpacity>
                )
            }
        }
    };

    showPop=(photo)=>{
        let overlayView = (
            <Overlay.PopView
                style={{alignItems: 'center', justifyContent: 'center'}}
                type={'zoomIn'}
                modal={false}
                ref={v => this.overlayPopView = v}
            >
                <TouchableOpacity
                    onPress={()=>this.overlayPopView&&this.overlayPopView.close()}
                    style={{width:width,height:height,justifyContent:'center',alignItems:'center'}}>
                    <Image
                        style={{height:Dimensions.get('window').height,width:width,resizeMode: Image.resizeMode.contain}}
                        source={{uri:ImageHead.baseApi+photo}}/>
                </TouchableOpacity>
            </Overlay.PopView>);
        Overlay.show(overlayView);
    };

    _renderItem=(item)=>{
        if(item.item.userId==this.props.toID){
            return(
                <View>
                    {this.props.ID=='purchaser'
                        ?(<View>
                            {item.item.votime!=''
                                ?(<View style={{width:width,justifyContent:'center',alignItems:'center',
                                    marginTop:10,marginBottom:10,borderRadius:3}}>
                                    <Text style={{color:'#ffffff',backgroundColor:'#9c9c9c',fontSize:12,padding:2}}>{item.item.votime}</Text>
                                </View>)
                                :(null)}
                            <View style={styles.labelView}>
                                <Image
                                    source={{uri:ImageHead.baseApi+item.item.head}}
                                    style={styles.headImg}/>
                                <View style={[styles.labelMsgView,{backgroundColor:'#3e6ee6'}]}>
                                    {this.chatItem(item.item.isMsg,item.item.message,item.item.photo,'purchaser',
                                        item.item.typeId,item.item.id,item.item.haveUsed)}
                                    {/*{item.item.isMsg==false*/}
                                    {/*?(<Text style={[styles.labelMsg,{color:'#ffffff',lineHeight:20}]}>{item.item.message}</Text>)*/}
                                    {/*:(<Image*/}
                                    {/*style={[{height:width/2,width:width/2,resizeMode: Image.resizeMode.stretch}]}*/}
                                    {/*source={{uri:ImageHead.baseApi+item.item.message}}/>)}*/}
                                </View>
                            </View>
                        </View>)
                        :(<View>
                            {item.item.votime!=''
                                ?(<View style={{width:width,justifyContent:'center',alignItems:'center',
                                    marginTop:10,marginBottom:10,borderRadius:3}}>
                                    <Text style={{color:'#ffffff',backgroundColor:'#9c9c9c',fontSize:12,padding:2}}>{item.item.votime}</Text>
                                </View>)
                                :(null)}
                            <View style={styles.labelView}>
                                <Image
                                    source={{uri:ImageHead.baseApi+item.item.head}}
                                    style={styles.headImg}/>
                                <View style={[styles.labelMsgView,{backgroundColor:'#fe5b00'}]}>
                                    {this.chatItem(item.item.isMsg,item.item.message,item.item.photo,'suppliers',
                                        item.item.typeId,item.item.id,item.item.haveUsed)}
                                </View>
                            </View>
                        </View>)}
                </View>
            )
        }else {
            return(
                <View>
                    {item.item.votime!=''
                        ?(<View style={{width:width,justifyContent:'center',alignItems:'center',
                            marginBottom:10,borderRadius:3}}>
                            <Text style={{color:'#ffffff',backgroundColor:'#9c9c9c',fontSize:12,padding:2}}>{item.item.votime}</Text>
                        </View>)
                        :(null)}
                    <View style={styles.labelViewChange}>
                        <View style={styles.labelMsgViewChange}>
                            {this.chatItem(item.item.isMsg,item.item.message,item.item.photo,'user',
                                item.item.typeId,item.item.id,item.item.haveUsed)}
                        </View>
                        <Image
                            source={{uri:ImageHead.baseApi+item.item.head}}
                            style={styles.headImgChange}/>
                    </View>
                </View>
            )
        }
    };

    render() {
        const {item}=this.props;
        return (
            <View style={styles.container}>
                {this._renderItem(item)}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0'
    },
    labelView:{
        flexDirection:'row',
        width:width-123,
    },
    headImg: {
        marginLeft:15,
        height:44,
        width:44,
        borderRadius:22,
    },
    labelMsgView:{
        borderBottomRightRadius:15,
        borderTopRightRadius:15,
        borderBottomLeftRadius:15,
        marginLeft:10,
        borderColor:'#e2e2e3',
        borderWidth:0.5,
        flexDirection:'row'
        // shadowOffset: {width: 0, height: 5},
        // shadowOpacity: 0.2,
        // shadowRadius: 5,
        // shadowColor: '#000000',
        // elevation:5
    },
    labelMsg:{
        fontSize:14,
        marginTop:10,
        marginBottom:10,
        marginLeft:16,
        marginRight:16,
        color:'#000000',
        backgroundColor:'rgba(0,0,0,0)'
    },
    labelViewChange:{
        flexDirection:'row',
        justifyContent:'flex-end',
        width:width-123,
        marginLeft:123,
    },
    headImgChange:{
        marginRight:15,
        width:44,
        height:44,
        borderRadius:22
    },
    labelMsgViewChange:{
        marginRight:10,
        borderBottomRightRadius:15,
        borderBottomLeftRadius:15,
        borderTopLeftRadius:15,
        backgroundColor:'#ffffff',
        borderColor:'#e2e2e3',
        borderWidth:0.5,
        flexDirection:'row'
        // shadowOffset: {width: 0, height: 5},
        // shadowOpacity: 0.2,
        // shadowRadius: 5,
        // shadowColor: '#000000',
        // elevation:5
    },
    textInputView:{
        height:39,
        backgroundColor:'#ffffff',
        color:'#000000',
        fontSize:20,
        borderRadius:5,
        width:width-120,
        marginLeft:15,
        padding:0
    },
    ButView:{
        marginLeft:5,
        height:44,
        width:60,
        alignItems:'center',
        justifyContent:'center',
    },
    PopMsg:{
        textAlign:'center',
        fontSize:15,
        color:'#3e6ee6',
    },
    overlay1:{
        height:44,
        width:width-10,
        borderRadius:10,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'#ffffff',
        marginTop:5,
        marginBottom:10
    },
    overlay:{
        height:44,
        width:width-10,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'#ffffff'
    },
});
